<template>
	<view class="container">
		<StatusBar />

		<view class="slogan">
			分类让垃圾变宝，和谐让世界微笑。
		</view>

		<view class="grid">
			<div class="box green" @click="toDetail(0)">
				<image src="../../static/gan.png" mode="heightFix"></image>

				<view class="mt-5">
					干垃圾
				</view>
			</div>
			<div class="box red" @click="toDetail(1)">
				<image src="../../static/youhai.png" mode="heightFix"></image>
				<view class="mt-5">
					有害垃圾
				</view>
			</div>
			<div class="box brown" @click="toDetail(2)">
				<image src="../../static/shi.png" mode="heightFix"></image>
				<view class="mt-5">
					湿垃圾
				</view>
			</div>
			<div class="box blue" @click="toDetail(3)">
				<image src="../../static/huishou.png" mode="heightFix"></image>
				<view class="mt-5">
					可回收物
				</view>
			</div>
		</view>

		<div class="buttons">
			<button class="take-photo" @click="takePhoto">
				<image src="/static/scan.png" mode=""></image>
				拍照识别
			</button>
			<button class="search-btn" @click="toSearch">
				<image src="/static/search.png" mode=""></image>
			</button>
		</div>

		<view class="banner mt-30" @click="toTest">
			<image src="../../static/banner.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	import StatusBar from '@/components/StatusBar.vue'



	export default {
		data() {
			return {
				title: 'Hello',
				src: "",
				top: 100
			}
		},
		components: {
			StatusBar
		},
		methods: {

			toTest() {
				uni.redirectTo({
					url: '/pages/test/TestHome'
				})

			},
			toDetail(index) {
				uni.redirectTo({
					url: `/pages/detail/detail?index=${index}`
				})
			},
			toSearch() {
				uni.navigateTo({
					url: "/pages/search/search"
				})
			},
			takePhoto() {
				// 路由跳转
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {

						let imgurl = res.tempFilePaths[0]

						this.$store.commit("saveImg", imgurl)

						uni.showLoading({
							title: "数据处理中",
							mask: true
						})

						// #ifdef MP-WEIXIN
						const fs = wx.getFileSystemManager()
						fs.readFile({
							filePath: imgurl,
							encoding: 'base64',
							position: 0,
							success: (res) => {
								this.img = res.data;
								this.send2BaiduAi()
							},
							fail(res) {
								console.error(res)
							}
						})
						// #endif

					}
				});
			},
			// 把图片发送给百度AI
			send2BaiduAi() {

				let img = this.img

				let encoded = encodeURI(img)

				const access_token = this.$store.getters.token.access_token

				const url =
					`https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token=${access_token}`
				uni.request({
					url: url,
					method: "POST",
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					data: {
						image: encoded
					},
					success: (res) => {

						if (res.data.error_code == 110) {
							uni.removeStorageSync("token")
							this.$store.dispatch("getToken", () => {
								this.send2BaiduAi()
							})

						} else if (res.data.result) {

							let result = res.data.result

							this.callAI(result)

						}
					}
				})
			},
			// 调用ChatGPT，识别垃圾分类
			async callAI(result) {

				let r = result[0]
				result.forEach(item => {
					if (item.score > r.score) {
						r = item
					}
				})

				if (r.keyword) {
					// 请求云函数
					const res = await uniCloud.callFunction({
						name: 'garbage',
						data: {
							prompt: {
								thing: r.keyword
							}

						}
					})

					console.log('识别结果：', r.keyword, res)

					// 将结果保存到store中，然后跳转结果页面
					this.$store.commit('saveResult', {
						keyword: r.keyword,
						classify: res.result?.reply
					})

					uni.hideLoading()


					uni.navigateTo({
						url: "/pages/scan/scan"
					})

				}

			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
		width: 100%;
		min-height: 100%;
		opacity: 1;
		box-sizing: border-box;
		padding: 0 52rpx;
		padding-bottom: 76rpx;

		background: radial-gradient(121% 36% at 50% 54%, #07BB84 21%, #027F55 99%);

	}

	.slogan {
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		text-align: center;
		padding: 20rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		margin-top: 12rpx;
	}

	.grid {
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.box {
			width: 304rpx;
			height: 304rpx;
			margin-top: 32rpx;
			border-radius: 40rpx;
			font-size: 36rpx;
			font-weight: 700;
			text-align: center;
			color: #fff;
			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.37);

			image {
				margin-top: 46rpx;
				height: 146rpx;
			}
		}
	}


	.banner {
		width: 646rpx;
		height: 280rpx;
		border-radius: 40rpx;
		box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.37);

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>